<template>
    <div class="tab-view-content" :style="curStyle">
        <slot v-if="isCreated"></slot>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        Component
    } from 'vue-property-decorator';
    @Component({
        name:`TabViewContent`
    })
    export default class Content extends Vue {
        nodeCount: number = 0;
        scrollX: boolean = true;
        isShow: boolean = false;
        isCreated: boolean = false;

        private get propName():string {
            return this.scrollX ? `width` : `height`;
        }

        get curStyle(): object {
            return {
                opacity: this.isShow ? 1 : 0,
                [this.propName]: `${1 / this.nodeCount * 100}%`
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./../../common/var";
    .tab-view-content {
        height: 100%;
        transition: all 1s $bezier;
    }
</style>